<template>
    <div class="orgTree">
        <div>
            <el-switch
                v-model="horizontal"
                active-text="垂直展开"
                inactive-text="水平展开"/>
            <el-switch
                v-model="collapsable"
                active-text="可收缩"
                inactive-text="不可收缩"/>
            <el-switch
                v-model="expandAll"
                active-text="收缩所有"
                inactive-text="展开所有"/>
        </div>
        <div class="orgTree-box">
            <v-org-tree v-if="data.id" :data="data" :node-render="nodeRender" :expand-all="expandAll" :horizontal="horizontal" :collapsable="collapsable" @on-node-click="handleNodeClick"/>
        </div>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
        >
            <div>
                <ul v-for="item in menuList" :key="item.key">
                    <li>{{ item.label }}</li>
                </ul>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { cardformInitDataForTree } from '@/api/api'
export default {
    name: 'ORG_ORGGRAPH_VUE',
    data() {
        return {
            formId: '6511',
            horizontal: false,
            collapsable: false,
            dialogVisible: false,
            expandAll: false,
            menuList: [
            /*
                {
                    key: 'edit',
                    label: '编辑部门'
                },
                {
                    key: 'detail',
                    label: '查看部门'
                },
                {
                    key: 'new',
                    label: '新增子部门'
                },
                {
                    key: 'delete',
                    label: '删除部门'
                }
                */
            ],
            data: {
                id: ''
            },
            solutionId: 71,
            jsonList: {
                '0': JSON.stringify({ 'list': [{ 'type': 'tag', 'name': '', 'icon': 'icon-input', 'options': { 'defaultValue': '##P|ORGVORGANIZATION_cname##', 'type': '', 'hit': false, 'tagColor': '', 'size': 'small', 'marginLeft': '0px', 'marginRight': '0px', 'remoteFunc': 'func_1559447901000_68178' }, 'key': '1559447901000_68178', 'model': 'tag_1559447901000_68178', 'rules': [] }], 'config': { 'formId': '6511|0', 'labelWidth': 100, 'labelPosition': 'top', 'size': 'small', 'column': 1, 'xl': 6, 'lg': 6, 'md': 8, 'sm': 12, 'height': '16px' }}),

                '1': JSON.stringify({ 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'icon-grid-', 'columns': [{ 'span': 4, 'list': [{ 'type': 'icon', 'name': '', 'icon': 'icon-input', 'options': { 'iconName': 'icon-zhuzhuangtu', 'color': '#000', 'fontSize': '14px', 'remoteFunc': 'func_1561099122000_11751' }, 'key': '1561099122000_11751', 'model': 'icon_1561099122000_11751', 'rules': [] }] }, { 'span': 20, 'list': [{ 'type': 'tag', 'name': '', 'icon': 'icon-input', 'options': { 'defaultValue': '##P|EMPVORGANIZATION_cname##', 'type': 'success', 'hit': false, 'tagColor': '', 'size': 'small', 'marginLeft': '0px', 'marginRight': '0px', 'linkType': 'inline', 'linkUrl': '', 'query': '', 'remoteFunc': 'func_1561099125000_7905' }, 'key': '1561099125000_7905', 'model': 'tag_1561099125000_7905', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1561099101000_98131' }, 'key': '1561099101000_98131', 'model': 'grid_1561099101000_98131', 'rules': [] }], 'config': { 'formId': '6511|1', 'labelWidth': 100, 'labelPosition': 'top', 'size': 'small', 'column': 1, 'xl': 6, 'lg': 6, 'md': 8, 'sm': 12, 'height': '16px' }}),

                '2': JSON.stringify({ 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'icon-grid-', 'columns': [{ 'span': 4, 'list': [{ 'type': 'icon', 'name': '', 'icon': 'icon-input', 'options': { 'iconName': 'icon-zhuzhuangtu', 'color': '#000', 'fontSize': '14px', 'remoteFunc': 'func_1561099323000_95468' }, 'key': '1561099323000_95468', 'model': 'icon_1561099323000_95468', 'rules': [] }] }, { 'span': 20, 'list': [{ 'type': 'tag', 'name': '', 'icon': 'icon-input', 'options': { 'defaultValue': '##P|EMPVORGANIZATION_cname##', 'type': 'info', 'hit': false, 'tagColor': '', 'size': 'small', 'marginLeft': '5px', 'marginRight': '10px', 'linkType': 'inline', 'linkUrl': '', 'query': '', 'remoteFunc': 'func_1561099325000_14790' }, 'key': '1561099325000_14790', 'model': 'tag_1561099325000_14790', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1561099311000_82453' }, 'key': '1561099311000_82453', 'model': 'grid_1561099311000_82453', 'rules': [] }], 'config': { 'formId': '6511|2', 'labelWidth': 100, 'labelPosition': 'top', 'size': 'small', 'column': 1, 'xl': 8, 'lg': 8, 'md': 8, 'sm': 12, 'height': '16px' }}),

                '3': JSON.stringify({ 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'icon-grid-', 'columns': [{ 'span': 4, 'list': [{ 'type': 'icon', 'name': '', 'icon': 'icon-input', 'options': { 'iconName': 'icon-shuxuanzeqi', 'color': '#000', 'fontSize': '14px', 'remoteFunc': 'func_1561099516000_41578' }, 'key': '1561099516000_41578', 'model': 'icon_1561099516000_41578', 'rules': [] }] }, { 'span': 20, 'list': [{ 'type': 'tag', 'name': '', 'icon': 'icon-input', 'options': { 'defaultValue': '##P|EMPVORGANIZATION_cname##', 'type': 'warning', 'hit': false, 'tagColor': '', 'size': 'small', 'marginLeft': '5px', 'marginRight': '10px', 'linkType': 'inline', 'linkUrl': '', 'query': '', 'remoteFunc': 'func_1561099519000_78675' }, 'key': '1561099519000_78675', 'model': 'tag_1561099519000_78675', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1561099504000_26796' }, 'key': '1561099504000_26796', 'model': 'grid_1561099504000_26796', 'rules': [] }], 'config': { 'formId': '6511|3', 'labelWidth': 100, 'labelPosition': 'top', 'size': 'small', 'column': 1, 'xl': 8, 'lg': 8, 'md': 8, 'sm': 12, 'height': '16px' }}),

                '4': JSON.stringify({ 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'icon-grid-', 'columns': [{ 'span': 24, 'list': [{ 'type': 'title', 'name': '', 'icon': 'icon-input', 'options': { 'defaultValue': '##P|EMPVORGANIZATION_cname##{##P|EMPVORGANIZATION_empcode##}', 'inline': false, 'textAlign': 'center', 'color': '#000', 'fontSize': '14px', 'fontWeight': 600, 'marginLeft': '0px', 'marginRight': '0px', 'titleHeight': '', 'lineHeight': '', 'linkType': 'inline', 'linkUrl': '/form/EMPDEVELOP/TAL_Workdesktop/EMPVEMP1BASIC/TALENTPORTRAIT_VUE', 'query': '', 'remoteFunc': 'func_1561261779000_91630' }, 'key': '1561261779000_91630', 'model': 'title_1561261779000_91630', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1561261666000_41954' }, 'key': '1561261666000_41954', 'model': 'grid_1561261666000_41954', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'icon-grid-', 'columns': [{ 'span': 24, 'list': [{ 'type': 'img', 'name': '', 'icon': 'icon-tupian', 'options': { 'defaultValue': '##P|EMPVORGANIZATION_PHOTO##', 'textAlign': 'center', 'backgroundColor': '#fff', 'borderRadius': '0px', 'width': '120px', 'height': '150px', 'linkType': 'inline', 'linkUrl': '/form/EMPDEVELOP/TAL_Workdesktop/EMPVEMP1BASIC/TALENTPORTRAIT_VUE', 'query': '', 'remoteFunc': 'func_1561261800000_98012' }, 'key': '1561261800000_98012', 'model': 'img_1561261800000_98012', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1561261790000_91293' }, 'key': '1561261790000_91293', 'model': 'grid_1561261790000_91293', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'icon-grid-', 'columns': [{ 'span': 24, 'list': [{ 'type': 'tag', 'name': '', 'icon': 'icon-input', 'options': { 'defaultValue': '##P|EMPVORGANIZATION_JOBNAME##', 'type': '', 'hit': false, 'tagColor': '', 'size': 'small', 'marginLeft': '10px', 'marginRight': '0px', 'linkType': 'inline', 'linkUrl': '', 'query': '', 'remoteFunc': 'func_1561286733000_27256' }, 'key': '1561286733000_27256', 'model': 'tag_1561286733000_27256', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'center', 'align': 'top', 'remoteFunc': 'func_1561286165000_26640' }, 'key': '1561286165000_26640', 'model': 'grid_1561286165000_26640', 'rules': [] }], 'config': { 'formId': '6511|4', 'labelWidth': 100, 'labelPosition': 'top', 'size': 'small', 'column': 1, 'xl': 6, 'lg': 6, 'md': 8, 'sm': 12, 'height': '300px' }})

            }
        }
    },
    created() {
        this._cardformInitDataForTree(null, { children: [] }, '0')
    },
    methods: {
        _cardformInitDataForTree(id, data, type) {
            cardformInitDataForTree({ templateJsons: this.jsonList }, id, this.solutionId, 'EMPVORGANIZATION_ID')
                .then(res => {
                    console.log(res)
                    if (id == null) {
                        cardformInitDataForTree({ templateJsons: this.jsonList }, res[0].id, this.solutionId, 'EMPVORGANIZATION_ID')
                            .then(res2 => {
                                res[0].children = res2
                                this.data = res[0]
                            })
                    } else {
                        if (!data.children.length) {
                            res.forEach(item => {
                                data.children.push(item)
                            })
                        }
                    }
                })
        },
        nodeRender(h, data) {
            console.log(data)
            if (!data.hasOwnProperty('id')) {
                return
            }
            return (
                <el-dropdown trigger='click' on-command={this.dropDownClick}>
                    <span class='el-dropdown-link'>
                        {data.label}
                        <fm-generate-form
                            data={data.list}
                            ref='generateForm'
                        />
                    </span>
                    <el-dropdown-menu slot='dropdown'>
                        {this.menuList.map(item => {
                            return <el-dropdown-item command={{ data: data, type: item.key }}>{item.label}</el-dropdown-item>
                        })}
                    </el-dropdown-menu>
                </el-dropdown>
            )
        },
        handleNodeClick(e, data, expand) {
            console.log(data)
            this._cardformInitDataForTree(data.id, data, data.type)
        },
        dropDownClick(row) {
            console.log(row)
            const _this = this
            if (row.type == 'delete') {
                this.$confirm('此操作将永久删除此节点, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message.success('点击了' + row.data.label + '删除')
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            } else if (row.type == 'edit') {
                this.$prompt('请编辑节点名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue: row.data.label
                }).then(({ value }) => {
                    row.data.label = value
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    })
                })
            } else if (row.type == 'new') {
                this.$prompt('请编辑节点名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(({ value }) => {
                    row.data.children.push({
                        id: row.data.id++,
                        label: value,
                        children: []
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    })
                })
            }
        }
    }
}
</script>
